<template>
	<view class="center">
		<view class="logo" :hover-class="!login ? 'logo-hover' : ''">
			<view class="user_admin" v-if="uerInfo.userAdmin === 'useradmin'">管理员</view>
			<view class="user_admin" v-else-if="uerInfo.username != null">普通用户</view>
			<view class="user_admin" v-else></view>
			<image class="logo-img" :src="login && uerInfo.avatarUrl  ? uerInfo.avatarUrl :defaultUrl"></image>
			<view class="logo-title">
				<text class="uer-name">Hi，{{login ? uerInfo.nickname : '您未登录'}}</text>
				<text class="go-login-navigat-arrow navigat-arrow" v-if="!login">&#xe65e;</text>
			</view>
		</view>
		<view class="center-list">
			<view class="center-list-item border-bottom">
				<text class="list-icon">&#xe60f;</text>
				<text class="list-text" @click="Person()">个人中心</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
			<view class="center-list-item">
				<text class="list-icon">&#xe639;</text>
				<text class="list-text" @click="order()">我的订单</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
		<view class="center-list">
			<view class="center-list-item border-bottom">
				<text class="list-icon">&#xe60b;</text>
				<text class="list-text" @click="message()">帮助与反馈</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
			<view class="center-list-item">
				<text class="list-icon">&#xe65f;</text>
				<text class="list-text" @click="message()">服务条款及隐私</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
		<view class="center-list">
			<view class="center-list-item">
				<text class="list-icon">&#xe614;</text>
				<text class="list-text" @click="message()">关于应用</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
		<view class="center-list">
			<view class="center-list-item" @click="goLogin()">
				<text class="list-icon">&#xe614;</text>
				<text class="list-text">{{login ? '退出' : '登录'}}</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				login: false,
				defaultUrl: '/static/logo.png',
				uerInfo: {},
				user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},

			}
		},
		onLoad() {
			this.getUser().then(res => {
				console.log(res)
				if (res) {
					this.uerInfo = res
					this.login = true
				}


			})
		},
		methods: {
			async getUser() {
				return (await this.request.get("/user/username/" + this.user.username)).data;
			},
			message() {
				// 	// 消息提示框
				uni.showToast({
					title: '此功能尚未开发',
					icon: 'error'
				})
			},
			order() {
				uni.navigateTo({
					url: '/pages/order/order'
				})
			},

			goLogin() {
				localStorage.removeItem("user")
				this.$message.success("操作成功")

				uni.navigateTo({
					url: '/pages/user/login'

				})
				setTimeout(res => {
					location.reload()
				}, 500)
			},
			Person() {
				if (this.login) {
					uni.navigateTo({
						url: '/pages/user/person'
					})
				} else {
					uni.navigateTo({
						url: '/pages/user/login'
					})
				}

			},

		}
	}
</script>

<style>
	/* #ifndef APP-PLUS-NVUE */
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/text-icon.ttf') format('truetype');
	}

	page {
		background-color: #f8f8f8;
	}

	/* #endif*/

	/* 解决头条小程序字体图标不显示问题，因为头条运行时自动插入了span标签，且有全局字体 */
	/* #ifdef MP-TOUTIAO */
	text :not(view) {
		font-family: texticons;
	}

	/* #endif */

	.center {
		flex: 1;
		flex-direction: column;
		background-color: #f8f8f8;
	}

	.logo {
		width: 750upx;
		height: 240upx;
		padding: 20upx;
		background-color: #2F85FC;
		flex-direction: row;
		align-items: center;
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}

	.go-login-navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: 20upx;
	}

	.center-list {
		flex-direction: column;
		background-color: #FFFFFF;
		margin-top: 20upx;
		width: 750upx;
	}

	.center-list-item {
		height: 90upx;
		width: 750upx;
		flex-direction: row;
		padding: 0upx 20upx;
	}

	.border-bottom {
		border-bottom-width: 1upx;
		border-color: #c8c7cc;
		border-bottom-style: solid;
	}

	.list-icon {
		width: 40upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #2F85FC;
		text-align: center;
		font-family: texticons;
		margin-right: 20upx;
	}

	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		flex: 1;
	}

	.navigat-arrow {
		height: 90upx;
		width: 40upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		text-align: right;
		font-family: texticons;
	}

	.user_admin {
		text-align: center;
		font-size: 38upx;
		color: #000000;
	}
</style>
